<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="less/index.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <title>酷我</title>
</head>
<body>
<!-- 头部 -->
<header>
    <div class="left"></div>
    <a href="">下载APP</a>
</header>
<!-- 搜索区域 -->
<div class="search">
    <div class="text">
        <span class="iconfont icon-sousuo"></span>
        <span>搜索你想听的歌曲</span>
    </div>
</div>
<!-- banner图 -->
<div class="banner">
    <ul>
        <li><a href="#"><img src="./assets/banner01.jpeg"></a></li>
    </ul>
</div>
<!-- 排行榜 -->
<div class="list">
    <div class="title">
        <h4>酷我排行榜</h4>
        <a href="">更多<span class="iconfont icon-right"></span></a>
    </div>
    <ul class="content">
        <li>
            <img src="./assets/icon_rank_hot.png" alt="">
            <div>
                <a>酷我热歌榜<span class="iconfont icon-right"></span> </a>
                <a>1.樱花树下的约定（完整版） - 旺仔小乔</a>
                <a>2.就让这大雨全都落下 - 容祖儿</a>
                <a>3.缺氧 - 轩姨（相信光）</a>
            </div>
        </li>
        <li>
            <img src="./assets/icon_rank_new.png" alt="">
            <div>
                <a>酷我新歌榜<span class="iconfont icon-right"></span> </a>
                <a>1.樱花树下的约定（完整版） - 旺仔小乔</a>
                <a>2.就让这大雨全都落下 - 容祖儿</a>
                <a>3.缺氧 - 轩姨（相信光）</a>
            </div>
        </li>
        <li>
            <img src="./assets/icon_rank_rise.png" alt="">
            <div>
                <a>酷我飙升榜<span class="iconfont icon-right"></span> </a>
                <a>1.樱花树下的约定（完整版） - 旺仔小乔</a>
                <a>2.就让这大雨全都落下 - 容祖儿</a>
                <a>3.缺氧 - 轩姨（相信光）</a>
            </div>
        </li>
    </ul>
</div>
<!-- 推荐歌单 -->
<div class="recommend">
    <div class="title">
        <h4>推荐歌单</h4>
        <a href="">更多<span class="iconfont icon-right"></span></a>
    </div>
    <ul class="content">
        <li><a href="">
            <div class="pic">
                <img src="./assets/song01.jpeg" alt="">
                <div class="cover">18.2W</div>
            </div>
            <span>抖音嗨爆DJ！劲爆旋律萦绕双耳</span>
        </a></li>
        <li><a href="">
            <div class="pic">
                <img src="./assets/song02.jpeg" alt="">
                <div class="cover">18.2W</div>
            </div>
            <span>抖音嗨爆DJ！劲爆旋律萦绕双耳</span>
        </a></li>

        <li><a href="">
            <div class="pic">
                <img src="./assets/song03.jpeg" alt="">
                <div class="cover">18.2W</div>
            </div>
            <span>抖音嗨爆DJ！劲爆旋律萦绕双耳</span>
        </a></li>
        <li><a href="">
            <div class="pic">
                <img src="./assets/song02.jpeg" alt="">
                <div class="cover">18.2W</div>
            </div>
            <span>抖音嗨爆DJ！劲爆旋律萦绕双耳</span>
        </a></li>
        <li><a href="">
            <div class="pic">
                <img src="./assets/song03.jpeg" alt="">
                <div class="cover">18.2W</div>
            </div>
            <span>抖音嗨爆DJ！劲爆旋律萦绕双耳</span>
        </a></li>
        <li><a href="">
            <div class="pic">
                <img src="./assets/song01.jpeg" alt="">
                <div class="cover">18.2W</div>
            </div>
            <span>抖音嗨爆DJ！劲爆旋律萦绕双耳</span>
        </a></li>
    </ul>
</div>
<!-- 下载 -->
<div class="download">
    <img src="assets/logo.png">
    <p>安装酷我音乐 发现更多好音乐</p>
    <a><span class="iconfont icon-right"></span></a>
</div>
</body>
</html>
